import React from 'react'
import {Button, NavBar, Divider, Toast} from 'antd-mobile'
import { Input } from 'antd-mobile'
import './Login.less';
import github from './images/github.png';
import qq from './images/qq.png';
import wechat from './images/wechat.png';
import axios from 'axios';

export default function Login(props) {

    //创建状态
    const [phone, setPhone] = React.useState('');
    const [code, setCode] = React.useState('');

    //声明一个函数发送请求
    const send = async () => {
        //获取用户输入的手机号 phone
        //检查手机号的格式是否正确
        let reg = /^1\d{10}$/;
        //判断
        if(!reg.test(phone)){
            //提示手机号格式错误
            Toast.show({
                icon: 'fail',
                content: '手机号格式错误',
            })
        }
        //如果格式正确, 发送请求
        let result = await axios.post('/login/digits', {phone: phone});

        //判断
        if(result.data.code === 20000){
            Toast.show({
                icon: 'success',
                content: '验证码发送成功',
            })
        }else{
            Toast.show({
                icon: 'fail',
                content: '请求失败',
            })
        }
    }

    //登录操作  location
    const login = async () => {
        let result = await axios.post('/login/phone', {phone, code});
        //判断
        if(result.data.code === 20000){
            Toast.show({
                icon: 'success',
                content: '登录成功',
            });
            //跳转到个人中心页面   编程式路由导航
            props.history.push('/usercenter');
        }else{
            Toast.show({
                icon: 'fail',
                content: '登录失败',
            })
        }
    }

    return (
        <div className='login-container'>
            {/* 顶部导航 start */}
            <NavBar back={null}>手机验证码登录</NavBar>
            {/* 顶部导航 end */}
            {/* 表单 start */}
            <div className="form">
                <div className="phone">
                    <Input clearable value={phone} onChange={v => setPhone(v)} />
                </div>
                <div className="h-10"></div>
                <div className="h-5"></div>
                <div className="code">
                    <Input clearable value={code} onChange={v => setCode(v)}  />
                    <Button size="small" onClick={send} >获取验证码</Button>
                </div>
                <div className="h-10"></div>
                <div className="h-10"></div>
                <div className="h-10"></div>
                <div className="button">
                    <Button size="middle" block color="danger" onClick={login}>登录</Button>
                </div>
            </div>
            {/* 表单 end */}
            <div className="h-20"></div>
            <div className="h-20"></div>
            {/* 线条 start */}
            <div className="line">
                <Divider>其他登录方式</Divider>
            </div>
            {/* 线条 end */}
            <div className="h-20"></div>
            {/* 图标 start */}
            <div className="other-login">
                <img src={github} alt="" />
                <img src={qq} alt="" />
                <img src={wechat} alt="" />
            </div>
            {/* 图标 end */}
            <div className="h-20"></div>
            <div className="h-20"></div>
            <div className="h-10"></div>
            {/* 政策提示 start */}
            <div className="policy">
                未注册的手机号, 验证后会自动创建硅谷账号, 登录即代表您同意《硅谷隐私政策》
            </div>
            {/* 政策提示 end */}

        </div>
    )
}
